<!-- 视频首页 -->
<template>
	<view class="video_bg" :style="{'--color':vuex_config.themeColor1}">
		<view class="top_relative">
			<view class="top_abso">
				<view class="search_box">
					<u-search @search="searchConfirm" @clear="searchConfirm" class="search_view" v-model="search.name"
						:height="60" :action-style="{ color: '#fff' }"></u-search>
				</view>
				<!-- 轮播 -->
				<view class="swiper">
					<sww-swipe indicatorDots autoplay  borderRadius="20rpx" :height="160" type="5" />
				</view>
			</view>
		</view>
		<view class="box-bottom">
			<sww-menu-class line="4" type="5" spacing="15rpx" />
			<!-- 视频列表 -->
			<view class="video-title">视频列表</view>
			<view class="scroll-box">
				<scroll-view scroll-x="true" class="scroll" v-if="!showtab">
					<view :class="['classification-item',search.type == item.pk_id?'active':'']"
						v-for="(item,index) in tabList" :key='index' @click="change(item.pk_id)">{{item.name}}</view>
				</scroll-view>
				<view class="classification-icon" @click="changeIcon">
					<view :class="['iconfont',showtab?'iconfont-e76e':'iconfont-e772' ,'u-font-40']"></view>
				</view>
				<view class="all-box" id='all' :style="{'height':showtab?Eheight+'px':Sheight+'px','transition':showtab?'height 0.6s ease':''}">
					<view :class="['classification-item',search.type == item.pk_id?'active':'']"
						v-for="(item,index) in tabList" :key='index' @click="change(item.pk_id)">{{item.name}}</view>
				</view>
			</view>
			<view class="video_list">
				<view class="video_list_item" v-for="(item, index) in dataList" :key="index"
					@click="onClick(item.pk_id)">
					<image class="video_list_item-img" :src="$formatImg(item.img)" mode=""></image>
					<view class="cont_title u-line-1">{{ item.name }}</view>
					<view class="prcie_how ">
						<view class="video-price spac u-line-1">￥{{ item.price }}</view>
						<view class="video-how spac  u-line-1">热度：{{ item.view }}</view>
					</view>
				</view>
			</view>
			<sww-load-more :params="dataListParams" @load="_load_data"></sww-load-more>
		</view>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				search: {
					name: '',
					type: -1
				},
				showtab: false,
				tabList: [],
				Sheight:'',
				Eheight:''
			};
		},
		mounted() {
			let that = this
			this.initPage();
			this.$resPost('GetCommonClassify', {
				parent_id: -1,
				type: 5,
				page_size: 200
			}).then(({
				data
			}) => {
				if (data[0]) {
					this.tabList = [{
						name: '全部',
						pk_id: -1
					}].concat(data);
					this.$nextTick(()=>{
						const query = uni.createSelectorQuery().in(this);
						query.select('#all').boundingClientRect(data => {
							console.log(data)
						  that.Eheight = data.height
						  that.Sheight = 0
						}).exec();
					})
				}
			});

		},
		methods: {
			initPage() {
				this._init_data('GetVideoList', {
					...this.search,
					fk_business_id: this.vuex_business.pk_id
				});
			},
			_onReachBottom() {
				this._load_data();
			},
			searchConfirm() {
				this.initPage();
			},
			change(id) {
				this.search.type = id
				this.changeIcon()
				this.initPage()
			},
			changeIcon() {
				this.showtab = !this.showtab
			},
			//点击视频
			onClick(id) {
				this.$linkTo(`/package/video/details/index?id=${id}`);
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';

	.top_relative {
		height: 450rpx;
	}

	.top_abso {
		padding-bottom: 10rpx;
		background-color: #fff;
		background-size: 100% auto;
		background-repeat: no-repeat;
		// position: fixed;
		// top: 0;
		// left: 0;
		// z-index: 1;
		width: 100%;
	
	.search_box {
			height: 100rpx;
			display: flex;
			padding: 0 10rpx 0 20rpx;
			align-items: center;

			.search_view {
				flex: 1;
				overflow: hidden;
			}
		}
	}
	.scroll-box{
		width: 100%;
		height: 60rpx;
		position: relative;
		margin-bottom: 20rpx;
	}
	.scroll {
		width: 100%;
		height: 100%;
		white-space: nowrap;
	}
	.classification-item {
		font-size: 28rpx;
		color: #333333;
		margin-left: 24rpx;
		padding-bottom: 20rpx;
		display: inline-block;
		&.active {
			color: var(--color);
			position: relative;
		}
	
		&.active::after {
			content: '';
			width: 60rpx;
			height: 6rpx;
			background-color: var(--color);
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.all-box{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 24rpx;
		overflow: hidden;
	}
	.classification-icon {
		display: inline-block;
		z-index: 10;
		position: absolute;
		width: 80rpx;
		height: 32rpx;
		right: 0;
		top: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.video_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 24rpx;

		.video_list_item {
			width: calc(100% / 2 - 12rpx);
			height: 100%;
			border-radius: 10rpx;
			padding-bottom: 30rpx;
		}

		.video_list_item-img {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
		}

		.cont_title {
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
			margin: 10rpx 0;
		}

		.video-price {
			color: #f82424;
			font-size: 28rpx;
		}

		.prcie_how {
			display: flex;
			justify-content: space-between;
			font-size: 20rpx;
			align-items: center;
		}

		.spac {
			width: calc(50% - 20rpx);
		}

		.video-how {
			text-align: right;
			color: #999;
		}
	}
</style>
